<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/HUAWEI/css/ShoppingCart.css">
</head>
<body>
        <!-- 黑色导航栏 start -->
        <div class="blank-nav">
            <nav class="blank">
                <ul class="left-nav">
                    <li><a href="#">首页</a><span>|</span></li>
                    <li><a href="#">消费者业务网站</a><span>|</span></li>
                    <li><a href="#">优购码</a><span>|</span></li>
                    <li><a href="#">企业商用</a><span>|</span></li>
                    <li><a href="#">Select Region</a><span>|</span></li>
                    <li class="dropdown">
                        <a href="#">更多精彩</a>
                        <div class="more">
                            <p>HarmonyOS</p>
                            <p>应用市场</p>
                            <p>华为终端云空间</p>
                            <p>开发者联盟</p>
                        </div>
                    </li>
                </ul>
                <ul class="rigth-nav">
                    <li><a href="#">请登录</a><span>|</span></li>
                    <li><a href="#">注册</a><span>|</span></li>
                    <li><a href="#">我的订单</a><span>|</span></li>
                    <li><a href="#">联系客服</a><span>|</span></li>
                    <li><a href="#">网站导航</a>
                        <span>|</span>
                        <table class="wzdh">
                            <tr>
                                <th colspan="2" rowspan="6">商城首页</th>
                                <th>频道</th>
                                <th></th>
    
                                <th>产品</th>
                                <th></th>
    
                                <th>增值服务</th>
                                <th></th>
    
                                <th>会员</th>
                                <th>商城广告</th>
                            </tr>
                            <tr>
                                <td>智慧办公</td>
                                <td>鸿蒙智家</td>
                                <td>手机</td>
                                <td>穿戴</td>
                                <td>手机服务</td>
                                <td>电脑平板服务</td>
                                <td>会员频道</td>
                                <td>商城公告</td>
                            </tr>
                            <tr>
                                <td>鸿蒙智行</td>
                                <td>华为手机</td>
                                <td>平板</td>
                                <td>电脑</td>
                                <td>音频服务</td>
                                <td>智慧屏服务</td>
                            </tr>
                            <tr>
                                <td>影音娱乐</td>
                                <td>运动健康</td>
                                <td>耳机音箱</td>
                                <td>智慧屏</td>
                                <td>穿戴服务</td>
                                <td>其他服务</td>
                            </tr>
                            <tr>
                                <td>教育购</td>
                                <td></td>
                                <td>智能家居</td>
                                <td>鸿蒙智行</td>
                                <td>以旧换新</td>
                                <td>补购服务</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td>数码配件</td>
                                <td>生态周边</td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                    </li>
                    <li><a href="#">手机版</a>
                        <span>|</span>
                        <div class="sjb">
                            <div class="sjb-box">
                                <div class="sjb-img">
                                    <img src="../img/fxewm.png" alt="">
                                </div>
                                <div class="sjb-ms">
                                    <p>华为商城APP</p>
                                    <p>新人有礼</p>
                                    <p>立即前往福利专区</p>
                                    <p>
                                        <img src="../img/wx.png" alt="">
                                        <img src="../img/pg.png" alt="">
                                        <img src="../img/xt.png" alt="">
                                    </p>
                                </div>
                            </div>
                            
                            <div class="sjb-box">
                                <div class="sjb-img">
                                <img src="../img/fxewm.png" alt="">
                            </div>
                            <div class="sjb-ms">
                                <p>华为商城公众号</p>
                                <p>微信扫一扫</p>
                                <p>
                                    <img src="../img/wx.png" alt="">
                                </p>
                            </div>
                            </div>
                            
                            <div class="sjb-box">
                                <div class="sjb-img">
                                <img src="../img/fxewm.png" alt="">
                                </div>
                                <div class="sjb-ms">
                                    <p>华为商城小程序</p>
                                    <p>
                                        <img src="../img/wx.png" alt="">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="gwc">
                        <a href="#">
                            <img src="/HUAWEI/img/care.png" alt="">
                            <span>购物车(0)</span>
                        </a>
                        <div class="gmwp">
                            <img src="../img/kcare.png" alt="">
                            <p>您的购物车是空的，赶紧选购吧~</p>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>
        <!-- 黑色导航栏 end -->
             <!-- 白色导航栏 start -->
    <div class="light-nav">
        <nav class="light">
            <img src="/HUAWEI/img/logo_app.png" alt="华为Logo">
        </nav>
    </div>
    <!-- 白色导航栏 end -->
     <!-- 商品品模块 start-->
     <div class="cart">
        <div class="cart-header">
            <input type="checkbox" id="select-all">
            <label for="select-all">全选</label>
            <div class="header-item">商品</div>
            <div class="header-item">单价</div>
            <div class="header-item">数量</div>
            <div class="header-item">小计</div>
            <div class="header-item">操作</div>
        </div>
        <div class="cart-items">
            <div class="cart-item">
                <div class="item-checkbox">
                    <input type="checkbox" class="select-item">
                </div>
                <div class="item-details">
                    <img src="/弹性网格布局/img/1 (11).jpeg" alt="FreeBuds 5i" class="item-image">
                    <div class="item-info">
                        <h3>HUAWEI FreeBuds 5i 海岛蓝</h3>
                        <p>海岛蓝 全款购买</p>
                    </div>
                </div>
                <div class="item-price">
                    <span class="current-price">¥349</span>
                    <span class="original-price">¥599</span>
                </div>
                <div class="item-quantity">
                    <button class="decrease">-</button>
                    <span class="quantity-value">1</span>
                    <button class="increase">+</button>
                </div>
                <div class="item-subtotal">¥349</div>
                <div class="item-actions">
                    <button class="remove-item">删除</button>
                </div>
            </div>

            <div class="cart-item">
                <div class="item-checkbox">
                    <input type="checkbox" class="select-item">
                </div>
                <div class="item-details">
                    <img src="/弹性网格布局/img/1 (11).jpeg" alt="FreeBuds 5i" class="item-image">
                    <div class="item-info">
                        <h3>HUAWEI FreeBuds 5i 海岛蓝</h3>
                        <p>海岛蓝 全款购买</p>
                    </div>
                </div>
                <div class="item-price">
                    <span class="current-price">¥349</span>
                    <span class="original-price">¥599</span>
                </div>
                <div class="item-quantity">
                    <button class="decrease">-</button>
                    <span class="quantity-value">1</span>
                    <button class="increase">+</button>
                </div>
                <div class="item-subtotal">¥349</div>
                <div class="item-actions">
                    <button class="remove-item">删除</button>
                </div>
            </div>
        </div>
        <div class="cart-summary">
            <input type="checkbox" id="select-all-footer">
            <label for="select-all-footer">全选</label>
            <button class="remove-selected">删除选中商品</button>
            <div class="total">
                总计：<span class="total-price">¥0</span>
            </div>
            <button class="checkout">结算(1)</button>
        </div>
    </div>
     <!-- 商品品模块 end-->
      <!-- 猜你喜欢 start -->
      <div class="thing">
        <div class="thing-top">
            <span>猜你喜欢</span>
        </div>
        <div class="thing-main">
            <div class="thing-main-btn">
                <span class="btnleft"><</span>
                <span class="btnright">></span>
            </div>
            <ul>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (13).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 70 Pro+</p>
                        <p class="goods-price">￥9499</p>
                    </div>
                </li>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (14).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 70</p>
                        <p class="goods-price">￥5999</p>
                    </div>
                </li>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (15).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 70 RS 非凡大师</p>
                        <p class="goods-price">￥11999</p>
                    </div>
                </li>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (16).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 60</p>
                        <p class="goods-price">￥5499<s>￥5999</s></p>
                    </div>
                </li>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (17).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 70 Pro / Mate
                             70 Pro+ 素皮保护壳</p>
                        <p class="goods-price">￥69</p>
                    </div>
                </li>
            </ul>
            
            <ul>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (20).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 70 Pro+</p>
                        <p class="goods-price">￥9499</p>
                    </div>
                </li>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (21).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 70</p>
                        <p class="goods-price">￥5999</p>
                    </div>
                </li>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (25).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 70 RS 非凡大师</p>
                        <p class="goods-price">￥11999</p>
                    </div>
                </li>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (23).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 60</p>
                        <p class="goods-price">￥5499<s>￥5999</s></p>
                    </div>
                </li>
                <li>
                    <div class="goods">
                        <img src="/弹性网格布局/img/1 (24).jpeg" alt="">
                        <p class="goods-name">HUAWEI Mate 70 Pro / Mate
                             70 Pro+ 素皮保护壳</p>
                        <p class="goods-price">￥69</p>
                    </div>
                </li>
            </ul>
        </div>
      </div> 
      <!-- 猜你喜欢 end -->
      <!-- footer start -->
      <footer>
        <div class="foot-box">
            <p class="footer-top">
                <span>百强企业 品质保证</span>
                <span>7天退货 15天换货</span>
                <span>48元免运费</span>
                <span>官方售后 全国联保</span>
            </p>
            <div class="footer-center">
                    <table class="footer-center-left">
                        <tr>
                            <th>购物指南</th>
                            <th>售后服务</th>
                            <th>服务支持</th>
                            <th>特色服务</th>
                            <th>关于我们</th>
                            <th>友情链接</th>
                        </tr>
                        <tr>
                            <td>享0分期利息</td>
                            <td>门店维修</td>
                            <td>服务店查询</td>
                            <td>防伪查询</td>
                            <td>公司介绍</td>
                            <td>华为集团</td>
                        </tr>
                        <tr>
                            <td>以旧换新</td>
                            <td>保修政策</td>
                            <td>维修备件价格</td>
                            <td>补购保障</td>
                            <td>补购保障</td>
                            <td>补购保障</td>
                        </tr>
                        <tr>
                            <td>补购保障</td>
                            <td>补购保障</td>
                            <td>补购保障</td>
                            <td>补购保障</td>
                            <td>补购保障</td>
                            <td>补购保障</td>
                        </tr>
                        <tr>
                            <td>补购保障</td>
                            <td></td>
                            <td>补购保障</td>
                            <td></td>
                            <td>补购保障</td>
                            <td></td>
                        </tr>
                    </table>
                <div class="footer-center-right">
                    <div class="Hotline">
                        <p>950805</p>
                        <p>7 x 24 小时客服热线 (仅收市话费)</p>
                        <p>在线客服</p>
                        <p>关注VMALL：</p>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="footer-bottom-left">
                    <img src="../img/logo_app.png" alt="">
                </div>

                <div class="footer-bottom-center">
                    <p>华为集团 消费者业务网站 华为应用市场 HarmonyOS 华为终端云空间 开发者联盟 华为商城手机版</p>
                    <p>隐私声明 服务协议 COOKIES Copyright © 2012-2025 华为终端有限公司 版权所有 | 经营资质 | 粤ICP备19015064号|粤公网安备 44190002003939号</p>
                    <p>增值电信业务经营许可证：粤B2-20190762|备案主体编号：44201919072182|粤新出网备（2021）2号|（粤）网械平台备字[2022]第00005号</p>
                    <p>互联网药品信息服务资格证（粤）-非经营性-2025-0033  | 广东省网络食品交易第三方平台备案：GDWS10168  | APP备案号: 粤ICP备19015064号-39A号</p>
                    <p>网信算备441901536982702230011号  | 网信算备441901536982704230013号</p>
                </div>
                
            </div>
        </div>
       </footer>
      <!-- footer end -->
</body>
<script src="/HUAWEI/js/ShoppingCart.js"></script>
</html>